<!-- 教师卡片组件 -->
<template>
	<a target="_blank" :href="url" style="display: block;">
	<div class="teacher">
		<div class="card">
			<div class="wrapper">
			<div class="teacher-pic" :style="{backgroundImage: 'url(' + img + ')', backgroundSize:'cover'}">
			</div>
			</div>
			<div class="infoBox">
				<div class="name"><span>{{name}}</span></div>
				<div class="tagBox" v-if="tag.length !== 0">
				 <a target="_blank" :href="item.tagurl"   class="ttag" v-for="(item,i) in tag" :key="i">
					<i :class="['iconfont',getIcons(item.type).name]" :style="getIcons(item.type).style"></i>
				 </a>
				</div>
				<div class="desc"><span>{{desc}}</span></div>
			</div>
		</div>	
	</div>
	</a>
</template>

<script>
	export default {
		props: {
				  'img':String,
				  'name':String,
				  'desc':String,
				  'tag':Array,
				  'url':String
		},
		created() {
		},
		methods:{
			getIcons(type){
				if( type === 'zhihu' )
				return {name:'icon-zhihu',style:'color:#0F84FD'}
				else if( type === 'weibo' )
				return {name:'icon-weibo',style:'color:#D81E06'}
				else if ( type === 'github' )
				return {name:'icon-git',style:'color:#0085A1'}
			}
		},
		created() {
		},
		computed:{

		}
	}
</script>

<style scoped="scoped">
	a{
		display: inline-block;
		text-decoration: none !important;
		color: #777777; 
	}
	.teacher{
		
		width: 25%;
		height: 365px;
		float: left;
		margin-top: 30px;
	}
	.card{
		transition: box-shadow .2s; 
		position: relative;
		width: 85%;
		height: 327px;
		margin: 0 auto;
		box-shadow: 0 1px 4px 1px rgba(0,0,0,.08);
		background: white;
	}
	.wrapper{
		border: 1px solid #d2d2d2;
		pointer-events: none;
		position: absolute;
		width: 90%;
		height: 160px;
		left: 4.8%;
		top: -2%;
		overflow: hidden;
	}
	.teacher:hover .card{
		box-shadow: 0 5px 20px 1px rgba(0,0,0,.1);
	}
	.teacher :hover .teacher-pic{
	
		transition:all .3s;
		-webkit-transform:  scale(1.05, 1.05);
		transform:  scale(1.05, 1.05);
	
	}
	.teacher  .teacher-pic{
		transition:all .3s;
		-webkit-transform:  scale(1, 1);
		transform:  scale(1, 1);
	
	}
		
	.teacher-pic{
		position: absolute;
		width: 100%;
		height: 160px;
		left: 0;
		top: 0;
	}
	.infoBox{
		position: absolute;
		width: 90%;
		font-size: 12px;
		height: 149px;
		bottom: 5px;
		left: 5%;
	}
    .name{
		margin: 5px 0;
		font-size: 14px;
		color: #222222;
	}
	.desc{
		color: #7f7f7f;
		font-size: 12px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
		overflow: hidden;
		height: 66px;
	}
	.teacher:hover .name{
		color: #38ba9f;
	}
	.tagBox{
		margin: 5px 0;	
		
		height: 20px;
	}
	.tagBox a{
	}
	 .ttag{
		 margin-right: 5px;
		 height: 20px;
		 line-height: 20px;
	display: inline-block;
	color: #7F7F7F;
	width: auto;
	font-size: 12px;
	text-align: center;
	}
</style>
